<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>权限管理</el-breadcrumb-item>
			<el-breadcrumb-item>权限列表</el-breadcrumb-item>
		</el-breadcrumb>
		
		<!-- 卡片区 -->
		<el-card>
			<!-- 权限列表 -->
			<el-table :data="tableData" style="width: 100%" border stripe>
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column prop="rolename" label="权限名称"></el-table-column>
				<el-table-column prop="roleurl" label="路径"></el-table-column>
				<el-table-column prop="rolegrade" label="权限等级">
					<template v-slot="scope">
						<el-tag v-if="scope.row.rolegrade == '0'">一级</el-tag>
						<el-tag type="success" v-else-if="scope.row.rolegrade == '1'">二级</el-tag>
						<el-tag type="warning" v-else>三级</el-tag>	
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	
	</div>
</template>

<script>
	export default {
		data() {
			return{
				//权限列表
				tableData:[
					{
						id: 50,
						rolename: '用户管理',
						roleurl: 'user',
						rolegrade: 0,
					}, {
						id: 51,
						rolename: '列表管理',
						roleurl: 'userlist',
						rolegrade: 0,
					}, {
						id: 52,
						rolename: '权限管理',
						roleurl: 'rights',
						rolegrade: 0,
					}, {
						id: 53,
						rolename: '角色列表',
						roleurl: 'rolelist',
						rolegrade: 1,
					}, {
						id: 54,
						rolename: '权限列表',
						roleurl: 'rightslist',
						rolegrade: 1,
					}, {
						id: 55,
						rolename: '商品管理',
						roleurl: 'goods',
						rolegrade: 0,
					}, {
						id: 56,
						rolename: '添加商品',
						roleurl: 'addgoods',
						rolegrade: 2,
					}, {
						id: 57,
						rolename: '删除商品',
						roleurl: 'delgoods',
						rolegrade: 1,
					}, {
						id: 58,
						rolename: '统计商品',
						roleurl: 'numgoods',
						rolegrade: 1,
					}, {
						id: 59,
						rolename: '订单管理',
						roleurl: 'orders',
						rolegrade: 0,
					}, {
						id: 60,
						rolename: '全部订单',
						roleurl: 'allorders',
						rolegrade: 2,
					}, {
						id: 61,
						rolename: '数据统计',
						roleurl: 'reports',
						rolegrade: 2,
					}
					
					
				],
				
			}
		},
		created() {
			
		},
		methods:{
			
		}
	}
	
	
	
</script>

<style scoped lang="less">
	.el-card{
		margin-top: 15px;
	}
	::v-deep .el-table th,
	::v-deep .el-table td {
	  text-align: center !important;
	}
	
</style>
